<template>
  <div>
    <page-list :x-uri="uri" :doactions="doactions" :custom-components="customComponents" :checkbox-item="false">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs :tabs="tabs" />
        <page-header content="活动报表" />
      </template>
    </page-list>
    <el-dialog title="订单详情" :visible.sync="visible" width="60%" top="7.5vh" :close-on-click-modal="false">
      <el-form label-width="200px" size="mini">
        <el-form-item label="订单号">
          <span>{{ order.order_sub_no }}</span>
        </el-form-item>
        <el-form-item label="课程价格">
          <span>{{ order.original_price | moneySymbol }}</span>
        </el-form-item>
        <el-form-item label="订单价格">
          <span>{{ order.payment | moneySymbol }}</span>
        </el-form-item>
        <el-form-item label="优惠价格">
          <span>{{ ((order.original_price * 100 - order.payment * 100) / 100) | moneySymbol }}</span>
        </el-form-item>
        <el-form-item label="购买者手机号">
          <span>{{ order.phone }}</span>
        </el-form-item>
        <el-form-item label="下单时间">
          <span>{{ order.create_time }}</span>
        </el-form-item>
        <el-form-item label="支付时间">
          <span v-if="order.payment_time">{{ order.payment_time }}</span>
          <span v-else>-</span>
        </el-form-item>
        <el-form-item label="支付方式">
          <span v-if="order.payment_time">{{ order.payment_type_text }}</span>
          <span v-else>-</span>
        </el-form-item>
        <el-form-item label="订单来源">
          <span>{{ order.from }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <span>{{ order.status_text }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import PageList from '@public/template/page_list.vue';
import Tabs from '../../tabs';
import Discount from '../../components/discount.vue';
import Price from '../../components/payment_price.vue';
import PageHeader from '@/components/page-header';
export default {
  components: {
    PageList,
    Tabs,
    PageHeader
  },
  data() {
    return {
      uri: '/admin/promotion/seckill/' + this.$route.params.id + '/report',
      tabs: [
        {
          title: '活动报表',
          uri: '/promotion/seckill/' + this.$route.params.id + '/report',
          meta: {
            permission: 'market.promotion.seckill.report'
          }
        }
      ],
      customComponents: {
        price: Price,
        discount: Discount
      },
      doactions: [{ title: '详情', meta: { permission: 'market.promotion.seckill.report' }, callback: this.info }],
      visible: false,
      order: {}
    };
  },
  methods: {
    info: function({ row }) {
      this.order = row;
      this.visible = true;
    }
  }
};
</script>
